<template>
	<view class="user-roney">
		<block v-if="show">
			<view class="user-reply-tabs">
				<u-tabs
					:is-scroll="false"
					:list="replyTabs"
					active-color="#141414"
					:current="replyIndex"
					@change="change">
				</u-tabs>
			</view>
			<view class="consult-list" v-if="replyIndex == 0">
				<view class="consult-item" v-for="(item,index) in noAnswer" :key="index">
					<view class="item-head">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-14/20210414/83c1d5f8ccb885550e30e555ca160652.png" mode=""></image>
						<text>{{item.content}}</text>
					</view>
					<view class="item-goods" @click="goProInfo(item.goods_id)">
						<image :src="item.goods.image"></image>
						<view class="item-goods-info">
							<view class="item-goods-info-name">{{item.goods.goods_name}}</view>
							<view class="item-goods-info-date">原定时间：{{item.delivery_time}}</view>
						</view>
					</view>
					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-bottom-sn">订单编号：{{item.order_sn}}</view>
						<view class="item-bottom-btn">
							<u-button :plain="true" :ripple="true" :custom-style="customStyle" @click="onOpenPopup('abnormal',item)">异常回复</u-button>
							<u-button :plain="true" :ripple="true" :custom-style="customStyle2" @click="onOpenPopup('normal',item)">正常回复</u-button>
						</view>
					</view>
				</view>
				<u-popup ref="reply" mode="bottom" border-radius="20" height="767rpx" z-index="99">
					<view class="popup-title">{{replyType === 'abnormal' ? '异常' : '正常'}}回复期货咨询</view>
					<view class="popup-input">
						<textarea
							:focus="false" 
							:adjust-position="true" 
							placeholder="温馨提醒：为了更好的安全服务，回复过程中禁止出现微信、手机号码，厂家请勿私加客户微信，谢谢！" 
							v-model="form.content" 
							:fixed="true"
							class="popup-input-textarea"
							 :style="{height:inputHeight +'rpx'}"
							:cursor-spacing="50">
						</textarea>
					</view>
					<view class="popup-abnormal" v-if="replyType === 'abnormal'">
						<view class="abnormal-item">
							<view class="item-label">原定时间</view>
							<view class="item-right">{{time}}</view>
						</view>
						<view class="abnormal-item">
							<view class="item-label">延迟时间</view>
							<view class="item-right" @click="timeShow=true" v-if="!form.plan_time" style="color:#999;min-width: 300rpx;text-align: right;">
								请选择 
								<u-icon name="arrow-down" color="#CCC" size="22" style="margin-left: 8rpx;"></u-icon>
							</view>
							<view class="item-right" v-else @click="timeShow=true">{{form.plan_time}}</view>
						</view>
					</view>
					<u-button :plain="true" :ripple="true" :custom-style="customStyle3" throttle-time="1000" @click="onSubmit">
						<u-loading mode="" style="margin-right: 20rpx;" v-if="isSubmit"></u-loading>
						{{isSubmit?'正在提交':'确认回复'}}
					</u-button>
				</u-popup>
				<u-picker mode="time" v-model="timeShow" :params="params" @confirm="getTime"></u-picker>
				<pt-nothing
					text="暂无待回答货期提问"
					:fixed="true"
					v-if="noMore && !noAnswer.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<view class="consult-list" v-if="replyIndex == 1">
				<view class="consult-item" v-for="(item,index) in PendingAnswer" :key="index">
					<view class="item-head">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-14/20210414/83c1d5f8ccb885550e30e555ca160652.png" mode=""></image>
						<text>{{item.ask_content}}</text>
					</view>
					<view class="item-head">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/A.png" mode=""></image>
						<text>{{item.content}}</text>
					</view>
					<view class="item-goods" @click="goProInfo(item.goods_id)">
						<image :src="item.goods.image"></image>
						<view class="item-goods-info">
							<view class="item-goods-info-name">{{item.goods.goods_name}}</view>
							<view class="item-goods-info-date" :style="{'marginTop': item.type == 2 ?'8rpx':'20rpx'}">原定时间：{{item.delivery_time}}</view>
							<view class="item-goods-info-abnormal" v-if="item.type == 2">延迟时间：{{item.plan_time}}</view>
						</view>
					</view>
					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-bottom-sn">订单编号：{{item.order_sn}}</view>
						<view class="item-bottom-btn">	
							<u-button v-if="userInfo.role_type==6 || userInfo.role_type==7" :plain="true" :ripple="true" :custom-style="customStyle4" @click="onOpenAudit(1,item)">通过</u-button>
							<u-button v-if="userInfo.role_type==6 || userInfo.role_type==7" :plain="true" :ripple="true" :custom-style="customStyle" @click="onOpenAudit(2,item)">拒绝</u-button>
						</view>
					</view>
				</view>
				<pt-nothing
					text="暂无待审核回复"
					:fixed="true"
					v-if="noMore1 && !PendingAnswer.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<view class="consult-list" v-if="replyIndex == 2">
				<view class="consult-item" v-for="(item,index) in passedList" :key="index">
					<view class="item-head">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-04-14/20210414/83c1d5f8ccb885550e30e555ca160652.png" mode=""></image>
						<text>{{item.ask_content?item.ask_content:'此提问已被删除!'}}</text>
					</view>
					<view class="item-head">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/A.png" mode=""></image>
						<text>{{item.content}}</text>
					</view>
					<view class="item-goods" @click="goProInfo(item.goods_id)">
						<image :src="item.goods.image"></image>
						<view class="item-goods-info">
							<view class="item-goods-info-name">{{item.goods.goods_name}}</view>
							<view class="item-goods-info-date" :style="{'marginTop': item.type == 2?'8rpx':'20rpx'}">原定时间：{{item.delivery_time}}</view>
							<view class="item-goods-info-abnormal" v-if="item.type == 2">延迟时间：{{item.plan_time}}</view>
						</view>
					</view>
					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-bottom-sn">订单编号：{{item.order_sn}}</view>
						<view class="item-bottom-btn">
							
						</view>
					</view>
				</view>
				<pt-nothing
					text="暂无已通过回复"
					:fixed="true"
					v-if="noMore2 && !passedList.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<pt-nomore v-if="noMore && noAnswer.length && replyIndex==0"></pt-nomore>
			<pt-nomore v-if="noMore1 && PendingAnswer.length && replyIndex==1"></pt-nomore>
			<pt-nomore v-if="noMore2 && passedList.length && replyIndex==2"></pt-nomore>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
		</block>
		<pt-loading></pt-loading>
		<uni-popup type="dialog" ref="auditShow">
			<uni-popup-dialog
				title="温馨提示"
				:content="auditContent"
				@confirm="confirm">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniPopupDialog
		},
		data() {
			return {
				userInfo:{},
				customStyle:{
					width:'135rpx',
					height:'50rpx',
					borderColor:'#FB4E26',
					color:'#FB4E26',
					fontSize:'24rpx',
					lineHeight:'50rpx',
					padding:'0'
				},
				customStyle2:{
					marginLeft:'30rpx',
					width:'135rpx',
					height:'50rpx',
					borderColor:'#141414',
					backgroundColor:'#141414',
					color:'#fff',
					fontSize:'24rpx',
					lineHeight:'50rpx',
					padding:'0'
				},
				customStyle3:{
					height:'80rpx',
					lineHeight:'80rpx',
					border:'none',
					backgroundColor:'#141414',
					color:'#fff',
					fontSize:'30rpx',
					marginTop:'60rpx'
				},
				customStyle4:{
					marginRight:'30rpx',
					width:'135rpx',
					height:'50rpx',
					borderColor:'#2979ff',
					color:'#2979ff',
					fontSize:'24rpx',
					lineHeight:'50rpx',
					padding:'0'
				},
				replyType:'',
				form:{
					ask_id:'',
					goods_id:'',
					type:1,
					content:'',
					plan_time:''
				},
				inputHeight:0,
				params:{
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow:false,
				replyTabs: [{
					name: '待回答(0)'
				},{
					name: '待审核(0)'
				},{
					name: '已通过(0)'
				}],
				isLoading:false,
				replyIndex:0,
				page:0,
				page2:0,
				page3:0,
				noMore:false,
				noMore1:false,
				noMore2:false,
				noAnswer:[],//待回复
				PendingAnswer:[],//待审核
				passedList:[],//已通过
				show:false,
				isSubmit:false,
				auditShow:false,//审核
				askForm:{
					ask_id:'',
					ask_answer_id:'',
					status:''
				},
				auditContent:'',
				time:''
			}
		},
		onLoad(options) {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.init();
			this.replyIndex = options.replyIndex || 0
			// 设置当前链接，登录成功返回当前链接
			let pages = getCurrentPages();
			let curPage = pages[pages.length - 1];
			uni.setStorageSync('newurl',curPage.$page.fullPath)
		},
		methods: {
			onOpenPopup(type,item){
				this.form.content = '1';
				let timer = setTimeout(()=>{
					this.form.content = '';
					clearTimeout(timer);
				},100)
				if(type=== 'normal'){
					this.form.type = 1;
					this.inputHeight = 462;
					this.customStyle3.marginTop = '60rpx'
				}else if(type === 'abnormal'){
					this.form.type = 2;
					this.inputHeight = 254;
					this.customStyle3.marginTop = '37rpx'
				}
				this.replyType = type;
				this.$refs.reply.open();
				this.form.ask_id = item.ask_id;
				this.form.goods_id = item.goods_id;
				this.time = item.delivery_time;
				
				this.form.plan_time = '';
			},
			// 获取日期
			getTime(e){
				this.form.plan_time = `${e.year}-${e.month}-${e.day}`
			},
			// 提交数据
			onSubmit(){
				if(!this.form.content){
					uni.showToast({
						icon:'none',
						title:'请输入回答内容'
					})
					return false;
				}
				if(this.form.type == 2){
					if(!this.form.plan_time){
						uni.showToast({
							icon:'none',
							title:'请选择延迟日期'
						})
						return false;
					}
				}
				if(this.isSubmit){
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return false;
				}
				this.isSubmit = true;
				let data = this.form;
				if(this.replyType == 'normal'){
					delete data.plan_time;
				}
				this.$u.apiWei.AddOrderGoodsAnswer(data).then(res=>{
					this.$refs.reply.close();
					uni.showToast({
						icon:'none',
						title:'回答成功'
					})
					this.noAnswer = []
					this.page = 0
					this.noMore = false
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.init();
					setTimeout(()=>{
						this.isSubmit = false;
					},2000)
				}).catch(()=>{
					this.isSubmit = false;
				})
			},
			// 切换
			change(e){
				this.replyIndex = e
				if(e == 0){
					this.noAnswer = []
					this.page = 0
					this.noMore = false;
					this.getToBeAnswer();
				}else if(e == 1){
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false;
					this.getPendingAnswer();
				}else if(e == 2){
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.getPassedAnswer();
				}
			},
			init(){
				this.getPassedAnswer();
				this.getPendingAnswer();
				this.getToBeAnswer();
			},
			// 获取已通过列表
			getPassedAnswer(){
				let data = {
					page: this.page2,
					status: 1,
				}
				if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.apiWei.OrderGoodsAnswerList(data).then(res=>{
					this.show = true;
					this.isLoading = false;
					if(res.counts){
						this.replyTabs[2].name = `已通过${res.counts}`
					}
					if(res.datas.length){
						res.datas.forEach(item=>{
							this.passedList.push(item)
						})
					}else{
						this.noMore2 = true
					}
				})
			},
			// 获取待审核列表
			getPendingAnswer(){
				let data = {
					page: this.page1,
					status: 3,
				}
				if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.apiWei.OrderGoodsAnswerList(data).then(res=>{
					this.show = true;
					this.isLoading = false;
					if(res.counts){
						this.replyTabs[1].name = `待审核${res.counts}`
					}
					if(res.datas.length){
						res.datas.forEach(item=>{
							this.PendingAnswer.push(item)
						})
					}else{
						this.noMore1 = true
					}
				})
			},
			// 获取待回答列表
			getToBeAnswer(){
				let data = {
					page: this.page,
					get_goods: 2,
					is_answer: 0,
					order_by:'ask_id',
					asc:2
				}
				if(this.userInfo.role_type==1){
					data.user_id = this.userInfo.user_id
				}else if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.apiWei.OrderGoodsAskLists(data).then(res=>{
					this.show = true;
					this.isLoading = false;
					if(res.counts){
						this.replyTabs[0].name = `待回答${res.counts}`
					}
					if(res.datas.length){
						res.datas.forEach(item=>{
							this.noAnswer.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			// 上啦加载更多
			onReachBottom() {
				if(this.replyIndex==0){
					if(!this.noMore){
						this.page++
						this.isLoading = true
						this.getToBeAnswer()
					}
				}else if(this.replyIndex==1){
					if(!this.noMore1){
						this.page1++
						this.isLoading = true
						this.getPendingAnswer()
					}
				}else if(this.replyIndex==2){
					if(!this.noMore2){
						this.page2++
						this.isLoading = true
						this.getPassedAnswer()
					}
				}
			},
			// 审核弹窗
			onOpenAudit(type,item){
				this.askForm.ask_id = item.ask_id;
				this.askForm.ask_answer_id = item.ask_answer_id;
				this.askForm.status = type;
				this.$refs.auditShow.open()
				this.auditContent = type == 1 ? '是否通过此条回复消息？': '是否拒绝此条回复消息？'
			},
			// 审核
			confirm(){
				this.$u.apiWei.OrderGoodsAnswerCheck(this.askForm).then(res=>{
					this.askForm.ask_id = '';
					this.askForm.ask_answer_id = '';
					this.askForm.status = '';
					uni.showToast({
						icon:'none',
						title:'审核成功'
					})
					this.noAnswer = []
					this.page = 0
					this.noMore = false
					this.PendingAnswer = []
					this.page1 = 0
					this.noMore1 = false
					this.passedList = []
					this.page2 = 0
					this.noMore2 = false
					this.init();
					this.$refs.auditShow.close();
				})
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
		}
	}
</script>

<style lang="scss">
.user-roney{
	.user-reply-tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.consult-list{
		background-color: #f7f7f7;
		padding-top: 110rpx;
		min-height: 100vh;
		.consult-item{
			margin: 0 auto;
			margin-top: 30rpx;
			width: 690rpx;
			// height: 387rpx;
			padding: 30rpx 30rpx 24rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 8rpx;
			&:first-child{
				margin-top: 0;
			}
			.item-head{
				display: flex;
				align-items: center;
				margin-bottom: 29rpx;
				image{
					display: block;
					width: 32rpx;
					height: 32rpx;
				}
				text{
					flex: 1;
					display: block;
					margin-left: 24rpx;
					font-size: 32rpx;
					color: #141414;
				}
			}
			.item-goods{
				display: flex;
				height: 160rpx;
				background-color: #f7f7f7;
				padding: 10rpx 10rpx 14rpx 10rpx;
				box-sizing: border-box;
				image{
					height: 136rpx;
					width: 136rpx;
				}
				.item-goods-info{
					margin-left: 33rpx;
					flex: 1;
					padding-right: 20rpx;
					.item-goods-info-name{
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #444;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.item-goods-info-date{
						margin-top: 20rpx;
						font-size: 22rpx;
						color: #a4a4a4;
					}
					.item-goods-info-abnormal{
						margin-top: 8rpx;
						font-size: 22rpx;
						color:#F59359;
					}
				}
			}
			.item-line{
				margin-top: 36rpx;
				margin-bottom: 24rpx;
				width: 100%;
				height: 1rpx;
				background-color: #F7F7F7;
			}
			.item-bottom{
				display: flex;
				.item-bottom-sn{
					flex: 1;
					font-size: 22rpx;
					color: #909090;
					line-height: 52rpx;
				}
				.item-bottom-btn{
					display: flex;
				}
			}
		}
	}
	
	.popup-title{
		margin-bottom:26rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #141414;
		text-align: center;
	}
	textarea{
		width:100%;
		font-size:28rpx;
		border:1rpx solid #EBEBEB;
		padding:10rpx;
		box-sizing:border-box;
	}
	.popup-input-textarea{
		width:100%;
		font-size:28rpx;
		border:1rpx solid #EBEBEB;
		padding:10rpx;
		box-sizing:border-box;
	}
	/deep/ .u-drawer-content{
		padding: 40rpx 30rpx 50rpx 30rpx;
	}
	.popup-abnormal{
		margin-top: 10rpx;
		.abnormal-item{
			display: flex;
			border-bottom: 1rpx solid #F5F5F5;
			height: 109rpx;
			align-items: center;
			justify-content: space-between;
			.item-label{
				font-size: 30rpx;
				color: #444;
			}
			.item-right{
				font-size: 30rpx;
				color: #141414;
			}
		}
	}
}
</style>
